<!DOCTYPE html>
<html>

<head>
    <link rel="icon" href="/favicon.png" type="image/x-icon">
    <meta charset="UTF-8" />
    <title>查询生成器</title>
    {% load static %}
    <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'icon/bootstrap-icons.min.css' %}">
    <link rel="stylesheet" href="{% static 'site/random/main.css' %}">
</head>

<body>
    <div class="container">
        {% include 'common/nav.html' %}
        <div class="row d-flex justify-content-center align-items-center">
            <div class="col-md-9">
                <div class="card mb-4">
                    <div class="card-header bg-light">
                        <h5 class="mb-0">构建查询条件</h5>
                    </div>
                    <div class="card-body">
                        <div id="query-conditions">
                            <!-- 查询条件将在这里动态添加 -->
                        </div>

                        <div class="form-group mt-3">
                            <button type="button" id="add-condition" class="btn btn-secondary">+ 添加条件</button>
                            <button type="button" id="generate-json" class="btn btn-primary">生成查询JSON</button>
                            <button type="button" id="reset-form" class="btn btn-outline-danger">重置</button>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header bg-light d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">生成的查询JSON</h5>
                    </div>
                    <div class="card-body json-container">
                        <button id="copy-json" class="btn btn-sm btn-outline-primary copy-btn" disabled>
                            <i class="bi bi-clipboard"></i> 复制
                        </button>
                        <div id="json-output" class="bg-light p-3 rounded">// 生成的JSON将显示在这里</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 条件模板 (隐藏) -->
    <div id="condition-template" style="display:none;">
        <div class="condition-card card mb-3">
            <div class="card-body">
                <div class="row g-2 align-items-center">
                    <div class="col-md-3">
                        <select class="form-control field-select" name="field" required>
                            <optgroup label="基础属性">
                                <option value="title" data-type="STR" data-isbasic="true">标题</option>
                                <option value="description" data-type="STR" data-isbasic="true">描述</option>
                                <option value="uploader" data-type="STR" data-isbasic="true">上传者</option>
                                <option value="date" data-type="DATE" data-isbasic="true">上传日期</option>
                            </optgroup>
                            <optgroup label="标签" id="tags-optgroup">
                                <!-- 标签选项将通过API动态加载 -->
                            </optgroup>
                        </select>
                    </div>

                    <div class="col-md-2">
                        <select class="form-control operator-select" name="operator" required>
                            <!-- 运算符将通过JS动态填充 -->
                        </select>
                    </div>

                    <div class="col-md-4 value-container">
                        <!-- 值输入区域将通过JS动态生成 -->
                    </div>

                    <div class="col-md-2">
                        <select class="form-control logic-select" name="logic">
                            <option value="AND">AND</option>
                            <option value="OR">OR</option>
                        </select>
                    </div>

                    <div class="col-md-1">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input not-checkbox" name="not" id="not-{id}">
                            <label class="form-check-label" for="not-{id}">NOT</label>
                        </div>
                    </div>

                    <div class="col-md-1">
                        <button type="button" class="btn btn-danger remove-condition">×</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="{% static 'site/random/main.js' %}"></script>
</body>

</html>